<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button>1</button>

    <script>

        // 防抖和节流
        //   高频率事件的一种解决方案  --- 在一段时间内只触发一次


        // 防抖：延迟执行这个事件，下一次触发事件的时候，清除这个延时器，重新计时  --- 不触发事件之后的一段时间后才会执行



        // 闭包 -> 减少全局变量的使用

        // const oBtn = document.querySelector('button');

        // oBtn.onclick = function () {
        //     console.log(111)
        // }



        // let timer = null;
        // window.onresize = function () {
        //     // 清除上一个延时器
        //     clearTimeout(timer);
        //     timer = setTimeout(function () {
        //         console.log(1)
        //     }, 300)
        // }


        // timer是外面的全局变量
        //  clearTimeout 是在函数内部清除的


        // 封装防抖函数
        // function debounce(cb, t = 300) {
        //     let timer = null;

        //     function fn(e) {
        //         // console.log(this)  // 被事件调用了   this指向事件源
        //         clearTimeout(timer);
        //         const _this = this;
        //         const args = arguments;
        //         timer = setTimeout(function () {
        //             // this -> window
        //             // 干啥？？？
        //             // cb.call(_this, e);
        //             // cb.call(_this , arguments[0] , arguments[1] , arguments[2] ...)
        //             cb.apply(_this, args);
        //         }, t)
        //     }

        //     return fn
        // }



        function debounce(cb, t = 300) {
            let timer = null;

            function fn(e) {
                const args = arguments;
                clearTimeout(timer);
                timer = setTimeout(() => {
                    // 
                    // cb.call(this, e);
                    cb.apply(this, args)
                }, t)
            }

            return fn
        }



        // window.onresize = debounce(function (e) {
        //     console.log(this);
        //     console.log(e)
        //     console.log(1)
        // })

        const oBtn = document.querySelector('button');

        oBtn.onclick = debounce(function (e) {
            console.log(e);
            console.log(this);
        })


    </script>

</body>

</html>